<!--********************************************************************
* Copyright© 2000 - 2025 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!--********************************************************************
* 该示例需要引入 
* mapbox-gl-enhance (https://iclient.supermap.io/web/libs/mapbox-gl-js-enhance/1.12.1-12/mapbox-gl-enhance.js)
*********************************************************************-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title data-i18n="resources.title_tiledMapLayer_4326WGS84"></title>
    <script type="text/javascript" src="../js/include-web.js"></script>
    <script type="text/javascript" include="mapbox-gl-enhance" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
    <style>
      body {
        margin: 0;
        padding: 0;
      }

      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
      }
    </style>
  </head>

  <body>
    <div id="map"></div>
    <script type="text/javascript">
      var host = window.isLocal ? window.server : 'https://iserver.supermap.io';

      // 方式一：1.调用 mapboxgl.supermap.initMap，根据 SuperMap iServer 地图服务的地图信息，创建地图和底图
      mapboxgl.supermap.initMap(host + '/iserver/services/map-world/rest/maps/World').then(function (result) {
        var map = result.map;
        //从 iServer 查询
        var idsParam = new mapboxgl.supermap.GetFeaturesByIDsParameters({
          IDs: [234],
          datasetNames: ['World:Countries']
        });
        var service = new mapboxgl.supermap.FeatureService(host + '/iserver/services/data-world/rest/data');
        service.getFeaturesByIDs(idsParam).then(function (serviceResult) {
          map.addSource('queryDatas', {
            type: 'geojson',
            data: serviceResult.result.features
          });
          map.addLayer({
            id: 'queryDatas',
            type: 'fill',
            source: 'queryDatas',
            paint: {
              'fill-color': '#008080',
              'fill-opacity': 1
            },
            filter: ['==', '$type', 'Polygon']
          });
        });
        map.addControl(new mapboxgl.NavigationControl(), 'top-left');
      });

      // 方法二： 直接用 mapboxgl.Map 初始化
      // var map = new mapboxgl.Map({
      //     container: 'map', // container id
      //     style: {
      //         version: 8,
      //         sources: {
      //             'raster-tiles': {
      //                 type: 'raster',
      //                 tileSize: 256,
      //                 //xyz形式，原生支持
      //                 //"tiles": ['https://t0.tianditu.gov.cn/DataServer?T=vec_c&x={x}&y={y}&l={z}'],

      //                 //iserver image资源模板；扩展支持
      //                 //"tiles": ['http://localhost:8090/iserver/services/map-World/rest/maps/World/image.png?viewBounds={viewBounds}&width={width}&height={height}'],

      //                 //iserver tileimage资源模板；扩展支持
      //                 //"tiles": ['https://iserver.supermap.io/iserver/services/map-jingjin/rest/maps/%E4%BA%AC%E6%B4%A5%E5%9C%B0%E5%8C%BA%E5%9C%B0%E5%9B%BE/tileimage.png?scale={scale}&x={x}&y={y}&width={width}&height={height}&origin={"x":-180,"y":90}'],

      //                 //推荐；   iserver tileimage资源；扩展支持
      //                 //参数列表：
      //                 //地图服务地址（到地图名)必填 ；
      //                 //rasterSource为"iserver"；必填；
      //                 //transparent:可选，默认为true；
      //                 //cacheEnabled: 是否使用缓存，默认为true；
      //                 //redirect: 如果为 true，则将请求重定向到瓦片的真实地址；如果为 false，则响应体中是瓦片的字节流,默认为false；
      //                 //layersID:要显示的图层id字符串；
      //                 //tileversion: 切片版本名称，cacheEnabled 为 true 时有效；
      //                 //rasterfunction: 栅格分析参数,类型为mapboxgl.supermap.NDVIParameter或mapboxgl.supermap.HillshadeParameter；
      //                 //format:瓦片格式，默认为'png'；
      //                 tiles: [host + '/iserver/services/map-world/rest/maps/World'],
      //                 rasterSource: 'iserver'
      //             }
      //         },

      //         layers: [
      //             {
      //                 id: 'simple-tiles',
      //                 type: 'raster',
      //                 source: 'raster-tiles',
      //                 minzoom: 0,
      //                 maxzoom: 22
      //             }
      //         ]
      //     },
      //     crs: 'EPSG:4326', // 或者 mapboxgl.CRS.EPSG4326  或者 new mapboxgl.CRS('EPSG:4326',[-180,-90,180,90]);
      //     center: [0, 0],
      //     zoom: 2
      // });
    </script>
  </body>
</html>
